<template>
  <div class="scroll">
    <example-card title="时间选择器" url="http://element.eleme.io/#/zh-CN/component/time-picker">
      <div>
        <el-time-select
            placeholder="起始时间"
            v-model="startTime"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
              maxTime: endTime
            }"
        >
        </el-time-select>
        <el-time-select
            placeholder="结束时间"
            v-model="endTime"
            :editable="false"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
              minTime: startTime
            }"
        >
        </el-time-select>
        {{startTime}} - {{endTime}}
      </div>
      <div>
        <el-time-picker
            is-range
            v-model="timeRange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
        >
        </el-time-picker>
        {{timeRange}}
      </div>
    </example-card>
    <example-card title="日期选择器" url="http://element.eleme.io/#/zh-CN/component/date-picker">
      <div>
        Date
        <el-date-picker
            v-model="date1"
            type="date"
            placeholder="选择日期"
        >
        </el-date-picker>
      </div>
      <div>
        带快捷选择
        <el-date-picker
            v-model="date2"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions1"
        >
        </el-date-picker>
      </div>
      <div>
        时间范围
        <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div>
        DateTime
        <el-date-picker
            v-model="date3"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
        <el-date-picker
            v-model="dateTimeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </div>
    </example-card>
  </div>
</template>

<script>
  export default {
    name: "ui_date_view",
    data() {
      const timestamp = Date.now();
      return {
        startTime: "",
        endTime: "",
        timeRange: [new Date(timestamp), new Date(timestamp + 60 * 60 * 1000)],
        date1: "",
        date2: "",
        now: Date.now(),
        dateRange: [],
        date3: "",
        dateTimeRange: []
      };
    },
    computed: {
      pickerOptions1() {
        const now = this.now;
        return {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date(now));
            }
          }, {
            text: "昨天",
            onClick(picker) {
              const date = new Date(now);
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          }]
        };
      }
    }
  };
</script>

<style scoped>
  .scroll .el-date-editor + .el-date-editor {
    margin-left: 20px;
  }
</style>
